<template>
  <view class="qss">
    <u-cell-group>
      <u-cell-item
          v-for="(language) in languageList"
          :key="language.lang"
          :arrow="false"
          :title="language.title"
          @click="langChange(language.lang)"
      >
        <view slot="right-icon">
          <u-icon name="checkbox-mark" :color="curLang === language.lang ? '#0079FF' : 'transparent'"/>
        </view>
      </u-cell-item>
    </u-cell-group>
  </view>
</template>

<script>
import {
  mapGetters,
  mapActions
} from 'vuex'

import mescrollI18n from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-i18n'
export default {
  data() {
    return {
      languageList: [
        {title: '中文', lang: 'zh'},
        {title: 'English', lang: 'en'}
      ],
      curLang: uni.getStorageSync('lang') || 'zh',
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({title: this.$t('语言')})
  },
  methods: {
    ...mapActions(['SET_LANG']),
    langChange(val) {
      console.log('val', val)
      this.SET_LANG(val)
      this.curLang = val
      this.$i18n.locale = val
      mescrollI18n.setType(val)
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
